<template>
	<view>
		<view class="backBox">
			<image :src="backpic" class="backPic"></image>
		</view>
		<view class="content-box">
			<view class="user-info" v-if="hasLogin">
				<view class="icon-box">
					<view class="icon-pic">
						<!-- <image class="pic" :src="peopleIcon" ></image> -->
					</view>
					<view class="user-pic" @click="toUserInfo">
						<image class="user" v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" :src="userInfo.avatar_file.url"></image>
						<image class="user" :src="userIcon" v-else></image>
					</view>
					<view class="icon-pic" @click="gotoMyLike">
						<image class="pic" :src="likeIcon"></image>
					</view>
				</view>
				<!-- {{userInfo.register_date}} -->
				<view class="name-box">{{userInfo.nickname||userInfo.username||userInfo.mobile}}</view>
				<view class="info-box">
					<view class="info-item" v-for="(item,i) in infoList" :key="i">
						<view class="title">{{item.title}}</view>
						<view class="number">{{item.number}}</view>
					</view>
				</view>
			</view>
			
			<view class="func-box" v-else>
				<view class="func-item" @click="myLogin" >点击登录</view>
			</view>
			<view class="func-box">
				
				<view class="func-item" @click="myLike">我的点赞</view>
				<view class="func-item" @click="myArticle">我发布的</view>
				<view class="func-item">评论过的</view>
				<view class="func-item" @click="logOut">退出登录</view>
				<view class="func-item" @click="goFeedback">意见反馈</view>
			</view>
			
		</view>

	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	export default {
		
		data() {
			return {
				"infoList": [{
						"title": "发布",
						"number": "462"
					},
					{
						"title": "点赞",
						"number": "235K"
					},
					{
						"title": "评论",
						"number": "167K"
					}
				],
				"peopleIcon": "/static/people.png",
				"userIcon": "https://mp-2fa66eaa-5332-4fc7-ace2-5761c3bf5b8e.cdn.bspapp.com/cloudstorage/a38bef0f-9325-4dd0-a33b-c0218f2923ef.jpg",
				"likeIcon": "/static/like.png",
				"backpic": "https://mp-2fa66eaa-5332-4fc7-ace2-5761c3bf5b8e.cdn.bspapp.com/cloudstorage/8fc0194f-4cda-4ff6-bb1a-ac7c10155bc2.jpg"
			};
		},
		computed: {
			userInfo() {
				return store.userInfo
			},
			hasLogin(){
				return store.hasLogin
			}
		},
		onReady() {
			
		},
		onLoad() {
			
		},
		methods: {
			myLike(){
				uni.navigateTo({
					url:"/pages/quanzi_like/list"
				})
			},
			myLogin(){
				uni.navigateTo({
					url:"/uni_modules/uni-id-pages/pages/login/login-withpwd"
				})
			},
			logOut(){
				uni.showModal({
					title:"是否确退出？",
					success(res) {
						console.log(res)
						if(res.confirm){
							mutations.logout()
						}
					}
				})
				
			},
			toUserInfo(){
				uni.navigateTo({
					url:"/uni_modules/uni-id-pages/pages/userinfo/userinfo"
				})
			},
			myArticle(){
				uni.navigateTo({
					url:"/pages/quanzi_article/list"
				})
			},
			goFeedback(){
				uni.navigateTo({
					url:"/uni_modules/uni-feedback/pages/opendb-feedback/opendb-feedback"
				})
			}
		}
	}
</script>

<style lang="scss">
	.backBox {
		width: 100%;
		height: 1500rpx;
		overflow: visible;

		.backPic {
			height: 100%;
			width: 100%;
		}
	}

	.content-box {
		position: absolute;
		top: 100rpx;
		width: 90%;
		overflow: visible;
		padding: 0 40rpx;
		padding-top: 60rpx;

		.user-info {
			.icon-box {
				padding: 0 90rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.icon-pic {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 80rpx;
					width: 80rpx;
					background-color: white;
					border-radius: 50%;

					.pic {
						width: 40rpx;
						height: 40rpx;
						//background-color: white;
						border-radius: 50%;

					}
				}

				.user-pic {
					width: 180rpx;
					height: 180rpx;

					.user {
						width: 100%;
						height: 100%;
						border-radius: 50%;
						border: 4rpx solid white;
						box-shadow: 0 0 30rpx #eee;
					}
				}
			}

			.name-box {
				font-size: 56rpx;
				font-weight: 600;
				color: #1a4864;
				height: 150rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.info-box {
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;

				.info-item {
					width: 30%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.title {
						font-size: 40rpx;
						font-weight: 600;
						color: #66867f;
						line-height: 80rpx;
					}

					.number {
						font-size: 30rpx;
						font-weight: 600;
						color: #1a4864;
					}
				}
			}
		}
		
		.func-box{
			.func-item{
				text-align: center;
				line-height: 100rpx;
				background-color: #90bdb3;
				color: white;
				font-size: 40rpx;
				margin-top: 30rpx;
				border-radius: 30rpx;
			}
		}
		
	}
</style>
